<template>
  <a-modal
    style="width: 1000px"
    :title="form.id ? '编辑' : '添加'"
    :open="visibleFlag"
    @cancel="onClose"
    :maskClosable="false"
    :destroyOnClose="true"
  >
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }">
      <a-row>
        <a-col :span="12">
          <a-form-item label="分类" name="categoryId" required>
            <a-select style="width: 70%" v-model:value="form.categoryId" placeholder="分类">
              <a-select-option v-for="(item, index) in dictValueList" :key="index" :value="item.categoryId" :label="item.categoryName">{{
                item.categoryName
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="物料名称" name="materialName">
            <a-input style="width: 70%" v-model:value="form.materialName" placeholder="物料名称" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="型号" name="model">
            <a-input style="width: 70%" v-model:value="form.model" placeholder="型号" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="规格" name="specification">
            <a-input style="width: 70%" v-model:value="form.specification" placeholder="规格" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="参数" name="parameter">
            <a-textarea style="width: 70%" v-model:value="form.parameter" placeholder="参数" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="供应商" name="supplier">
            <a-select style="width: 70%" v-model:value="form.subcontractorInfoId" placeholder="供应商">
              <a-select-option v-for="item in registrantList" :key="item" :value="item.id">{{ item.companyName }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="采购价" name="purchasePrice">
            <a-input-number style="width: 70%" v-model:value="form.purchasePrice" placeholder="采购价" :step="0.001" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="是否禁用" name="disabledFlag">
            <a-select v-model:value="form.disabledFlag" style="width: 70%">
              <a-select-option value="1">是</a-select-option>
              <a-select-option value="0">否</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="备注" name="remark">
            <a-textarea style="width: 70%" v-model:value="form.remark" placeholder="备注" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <template #footer>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">保存</a-button>
      </a-space>
    </template>
  </a-modal>
</template>
<script setup>
  import { reactive, ref, nextTick, onMounted } from 'vue';
  import _ from 'lodash';
  import { message } from 'ant-design-vue';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { materialBaseApi } from '/@/api/business/material-base/material-base-api';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { subcontractorInfoApi } from '/@/api/business/subcontractor-info/subcontractor-info-api.js';
  // 供应商
  const registrantList = ref([]);
  const supplier1 = reactive({
    pageNum: 1,
    pageSize: 10,
  });
  async function suppliction() {
    const res = await subcontractorInfoApi.queryPage(supplier1);
    console.log(res);
    registrantList.value = res.data.list;
  }

  // ------------------------ 事件 ------------------------

  const emits = defineEmits(['reloadList']);

  // ------------------------ 显示与隐藏 ------------------------
  // 分类
  const formDefault1 = reactive({
    categoryType: 2,
    parentId: '',
  });
  const dictValueList = ref([]);
  async function queryDict2() {
    let res = await materialBaseApi.ClassificationData(formDefault1);
    console.log(res);
    dictValueList.value = res.data;
  }
  // 是否显示
  const visibleFlag = ref(false);

  function show(rowData) {
    console.log(rowData);
    queryDict2();
    suppliction();
    Object.assign(form, formDefault);
    if (rowData && !_.isEmpty(rowData)) {
      Object.assign(form, rowData);
    }

    visibleFlag.value = true;

    nextTick(() => {
      formRef.value.clearValidate();
    });
  }

  function onClose() {
    Object.assign(form, formDefault);
    visibleFlag.value = false;
  }

  // ------------------------ 表单 ------------------------

  // 组件ref
  const formRef = ref();

  const formDefault = {
    id: undefined,
    categoryId: undefined, //分类
    materialName: undefined, //物料名称
    model: undefined, //型号
    specification: undefined, //规格
    parameter: undefined, //参数
    subcontractorInfoId: undefined, //供应商
    purchasePrice: undefined, //采购价
    disabledFlag: undefined, //是否禁用
    remark: undefined, //备注
  };

  let form = reactive({ ...formDefault });

  const rules = {
    categoryId: [{ required: true, message: '分类 必填' }],
    materialName: [{ required: true, message: '物料名称 必填' }],
    model: [{ required: true, message: '型号 必填' }],
    subcontractorInfoId: [{ required: true, message: '供应商 必填' }],
    purchasePrice: [{ required: true, message: '采购价 必填' }],
  };

  // 点击确定，验证表单
  async function onSubmit() {
    try {
      await formRef.value.validateFields();
      save();
    } catch (err) {
      message.error('参数验证错误，请仔细填写表单数据!');
    }
  }

  // 新建、编辑API
  async function save() {
    SmartLoading.show();
    try {
      if (form.id) {
        await materialBaseApi.update(form);
      } else {
        await materialBaseApi.add(form);
      }
      message.success('操作成功');
      emits('reloadList');
      onClose();
    } catch (err) {
      smartSentry.captureError(err);
    } finally {
      SmartLoading.hide();
    }
  }

  defineExpose({
    show,
  });
  onMounted(() => {});
</script>
